<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="nav-brand">测试网站</div>
            <ul class="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>欢迎来到测试页面</h1>
                <p>这是一个响应式设计的测试网站，展示HTML、CSS和JavaScript的基本功能。</p>
                <button id="cta-btn" class="cta-button">了解更多</button>
            </div>
            <div class="hero-image">
                <img src="https://picsum.photos/600/400" alt="测试图片">
            </div>
        </section>

        <section id="about" class="section">
            <h2>关于我们</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="about-image">
                    <img src="https://picsum.photos/500/350" alt="关于我们">
                </div>
            </div>
        </section>

        <section id="services" class="section">
            <h2>我们的服务</h2>
            <div class="services-grid">
                <div class="service-card">
                    <h3>服务一</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
                </div>
                <div class="service-card">
                    <h3>服务二</h3>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
                </div>
                <div class="service-card">
                    <h3>服务三</h3>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                </div>
            </div>
        </section>

        <section id="contact" class="section">
            <h2>联系我们</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" required>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" required>
                </div>
                <div class="form-group">
                    <label for="message">留言</label>
                    <textarea id="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="submit-btn">发送消息</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 测试网站. 保留所有权利.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>